<template>
  <div>
    <el-tabs
      v-model="editableTabsValue"
      type="card"
      class="demo-tabs"
      closable
      @tab-click="handleClick"
      @tab-remove="removeTab"
    >
      <el-tab-pane
        v-for="item in editableTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
        <component :is="item.comName" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

import { ref, watch} from "vue";
import Home from "@/components/Home";
import ScoreSys from "@/components/score/ScoreSys";
import TeacherSys from "@/components/teachers/TeacherSys";
import CourseSys from "@/components/course/CourseSys";
import StuSys from "@/components/students/StuSys";
import ServeSys from "@/components/serve/index";
import { useStore } from 'vuex' // 引入useStore 方法

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "TabMenu",
  components: {
    ScoreSys,
    ServeSys,
    TeacherSys,
    CourseSys,
    StuSys,
    Home
  },

  setup() {

    const store = useStore()  // 该方法用于返回store 实例
    // let tabIndex = store.state.tabMenu.tabIndex
    const editableTabsValue = ref(store.state.tabMenu.editableTabsValue)
    const editableTabs = ref(store.state.tabMenu.editableTabs)

    if (store.state.tabMenu.editableTabsValue != null) {
      editableTabsValue.value = store.state.tabMenu.editableTabsValue
      editableTabs.value = store.state.tabMenu.editableTabs
    }

    const removeTab = (targetName) => {
      store.commit("tabMenu/delTab", targetName)
    }

    const handleClick = (tab) => {
      store.state.tabMenu.editableTabsValue = tab.props.name
    }

    watch(() => store.state.tabMenu.editableTabsValue, (newValue, oldValue) => {
      editableTabsValue.value = newValue
    },{deep: true})

    watch(() => store.state.tabMenu.editableTabs, (newValue, oldValue) => {
      editableTabs.value = newValue
    },{deep: true})

    return {
      removeTab,
      handleClick,
      editableTabsValue,
      editableTabs
    }
  }
}
</script>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>